<template>
  <div class="main-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="header-content">
          <div><h2>市值机器人</h2></div>
          <div class="execution-control">
            <el-input v-model="collectAddress" placeholder="输入归集钱包" style="width: 360px;" />&nbsp;
            <el-input v-model="privateKey" placeholder="输入主钱包私钥" style="width: 250px;" />&nbsp;
            <el-button type="success" @click="handleParseWallet" :icon="Wallet" v-if="!address">解析钱包</el-button>
            <el-button type="danger" @click="handleParseWallet" :icon="Wallet" v-if="address">{{fmt(address)}}</el-button>
            <el-button type="primary" loading v-if="running">执行中</el-button>
            <el-button type="primary" @click="handleStart" :icon="VideoPlay" v-else>执行</el-button>
            <el-button type="warning" @click="handleStop" :icon="VideoPause">停止</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <!-- 左侧配置面板 -->
      <el-col :span="14">
        <el-tabs v-model="activeName">
          <el-tab-pane label="系统配置" name="first">
            <Trade ref="trade"/>
        </el-tab-pane>
        <el-tab-pane label="机器人钱包" name="second">
            <Account ref="accounts" />
        </el-tab-pane>
        <el-tab-pane label="空投钱包" name="third">
            <Airdrop ref="airdrops" />
        </el-tab-pane>
        <!-- <el-tab-pane label="开发者" name="third">
            <Dev ref="dev" />
        </el-tab-pane> -->
        </el-tabs>
      </el-col>
      <!-- 右侧交易参数 -->
      <el-col :span="10">
        <Logger ref="logger"/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, provide,reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import Trade from '../components/Trade.vue'
import Account from '../components/Account.vue'
import Airdrop from '../components/Airdrop.vue'
import Logger from '../components/Logger.vue'
// import Dev from '../components/Dev.vue'
import { Wallet,VideoPlay,VideoPause, Refresh} from '@element-plus/icons-vue'

import { useCounterStore } from '@/stores/counterStore'
const counter = useCounterStore()

const activeName = ref('first')//first,second
const dev =ref({});
const trade =ref({});
const accounts =ref({});
const airdrops =ref({});
const logger =ref({});

const collectAddress=ref('0x994ffbbB0A176CeC19f1d6B163CCF7b6cF8c7903');
const privateKey=ref('');
const address = ref('');
const running=ref(false);

provide('collectAddress',collectAddress);
provide('privateKey',privateKey);
provide('address',address);
provide('logger',logger);

provide('trade',trade);
provide('accounts',accounts);
provide('airdrops',airdrops);

provide('indexRunning',running);



onMounted(() => {
})

const handleStart = async() => {
  const params = {
    privateKey: privateKey.value,
    address: address.value,
  };
  try {
    await trade.value.startTrading(params,logger.value);
    running.value=true;
    await logger.value.start();
  } catch (error) {
    running.value=false;
    ElMessage.error(error.message);
  }
};

const handleStop = () => {
  const params = {
    privateKey: privateKey.value,
    address: address.value,
  };
  trade.value.stopTrading(params,logger.value);
  logger.value.stop();
  running.value=false;
};

const fmt = (addr) => {
  return `${addr.slice(0, 6)}...${addr.slice(-6)}`;
};

const handleParseWallet = async () => {
  trade.value.parseWallet(privateKey.value,logger.value);
};

</script>

<style scoped>
.main-container{
  width: 99%;
}
.header-content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.execution-control{
  margin-top: 20px;
}
.mt-20 {
  margin-top: 20px;
}
.config-section {
  margin-bottom: 20px;
}
</style>